<!--接害岗位   injuredPost-->
<template>
  <Layout>
    <Form ref="form1" :model="dataToQuery" :label-width="120">
      <Row v-show="!switchFlag" class="query-form" >
        <Col span="8">
          <FormItem label="岗位名称：" prop="content" >
            <Input class='query-form-el' placeholder="岗位名称" type='text' v-model='dataToQuery.name'></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="" prop="content" style="width: 100%" ></FormItem>
        </Col>
        <Col span="8">
          <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
          <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
          <!--<Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button>-->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
           border :columns="columns1"  :data="dataTable" >
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24" >
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
      </Col>
    </Row>
    <Modal  title="接害岗位" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=500 class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?190:null" :label-position="mode === 'view'?'right':'top'">
            <FormItem label='岗位名称：' prop='name'>
              <div v-if="mode === 'view'">{{ dataToView.name }}</div>
              <Input v-else class=''placeholder="请填写岗位名称" type='text' v-model='dataToView.name'></Input>
            </FormItem>
            <FormItem label='岗位描述：' prop='notes'>
              <div v-if="mode === 'view'">{{ dataToView.notes }}</div>
              <Input v-else class=''placeholder="请填写岗位描述" v-model='dataToView.notes' type="textarea" :rows="2" ></Input>
            </FormItem>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
        <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {formatDate} from '@/tools/index'
import _deepclone from 'lodash/cloneDeep'
var cascaderDom = () => import('@/components/cascader-dom.vue');
import pageCommonFunction from '@/components/pageCommonFunction.js'
export default {
  components:{
    cascaderDom
  },
  data(){
    return{
      ...this.createCommonDataField(),
      columns1: [
        { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        { key:'name',title: '岗位名称',  align: 'center' },
        { key:'notes',title: '岗位描述',  align: 'center' },
        this.getActionColumns(),
      ],
      ruleCustom : {
        name: [ { required: true, message: '请填写岗位名称', trigger: 'change',}],
        notes: [ { required: true, message: '请填写岗位描述', trigger: 'change',}],
      },
      tableHeight:10,
      // api
      queryUrl:Api.queryHealthApi.replace('{{type}}','injuredPost'),
      exportUrl:Api.exportHealthApi.replace('{{type}}','injuredPost'),
      deleteUrl:Api.deleteHealthApi.replace('{{type}}','injuredPost'),
      bthDeleteUrl:Api.batchDeleteHealthApi.replace('{{type}}','injuredPost'),
      getUrl:Api.getHealthApi.replace('{{type}}','injuredPost'),
      updateUrl:Api.updateHealthApi.replace('{{type}}','injuredPost'),
      saveUrl:Api.saveHealthApi.replace('{{type}}','injuredPost'),
    }
  },
  mounted() {
     this.setTableHeight();
    this.query();
  },
  methods:{
    ...pageCommonFunction,
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    query() {
      this.queryAjax();
    },
    submit(name) {
      this.submitAjax(name);
    },
  },
  watch:{
  },
}
</script>

<style lang='css' scoped>
  .rpt-form{}
  /deep/ .rpt-form .query-form-el{width:100%;}
  /deep/ .rpt-form .ivu-form-item{margin-bottom: 24px;}

</style>
